<script setup>
import { onMounted, ref } from "vue";
import useRoute from "../../hooks/route";
import { onLoad } from "@dcloudio/uni-app";
import { lowerInfoApi } from "@/services/client";
import useFormat from "@/hooks/format";
import addDeep from "lodash/add";

const { formatPhone } = useFormat();

// route query
const routeQuery = ref();
const { getRouteQuery } = useRoute();

// init data loading
const initDataLoading = ref(true);
// api得到的数据 展示
const showDetail = ref(undefined);

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    const results = await Promise.all([
      lowerInfoApi({
        lower_id: routeQuery.value?.id,
      }),
    ]);
    showDetail.value = results[0].data;
    initDataLoading.value = false;
  } catch (error) {
    initDataLoading.value = false;
  }
};

onMounted(() => {
  initData();
});

// on load
onLoad((query) => {
  // 获取路由参数
  routeQuery.value = getRouteQuery(query);
});
</script>

<template>
  <view class="container">
    <!-- scroll view -->
    <scroll-view class="scroll-view" scrollY>
      <view class="content">
        <view v-if="!initDataLoading">
          <uni-title type="h3" title="客户详情"></uni-title>
          <view class="info-warp">
            <view class="info-item">
              <text class="info-label">姓名</text>
              <text class="info-value"
                >{{
                  showDetail.name
                    ? showDetail.name
                    : showDetail.nickname
                    ? showDetail.nickname
                    : "-"
                }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">手机号</text>
              <text class="info-value">
                {{ (showDetail.phone && formatPhone(showDetail.phone)) || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">注册时间</text>
              <text class="info-value">
                {{ showDetail.create_time || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">推荐人</text>
              <text class="info-value">
                {{ showDetail.referrer.uid || "" }} ({{
                  showDetail.referrer.nickname || ""
                }})
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">等级</text>
              <text class="info-value">
                {{ showDetail.level.name || "-" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">他的客户人数</text>
              <text class="info-value">
                <!-- {{
                  addDeep(
                    showDetail.lower_count.one,
                    showDetail.lower_count.two
                  ) || "-"
                }} -->
                {{ showDetail.lower_count }}人
              </text>
            </view>
          </view>
        </view>
        <view v-else>
          <up-skeleton rows="6" loading animate></up-skeleton>
        </view>
      </view>
    </scroll-view>
    <br />
  </view>
</template>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
